Header bar with action buttons

Summary:
  • Located right below the status bar.
  • Used in all basic app views.
    • Exception: full-screen views.
  • Displays the title of the current view.
  • Action button 1 holds the key function of the view.
  • Action button 2 always holds the Options menu.
    • If Options is not needed, the icon is shown dimmed.
 Java

Related design guidelines

Header bar is present in all screens, with a few exceptions: lock screen, home screens, and full-screen views.

The header bar appears below the status bar and displays the title of the current view in lower case. Every time users move through the UI, the header bar changes its title to the title of the new screen.

In landscape view the area of header bar reduces in size, allowing the app more screen real estate. Otherwise all screen elements are the same as those used in the portrait view.

There are two available action buttons that always show the action as an icon.

Action button 1 (right-most location of the header bar):
  • Is used for the primary action of the view.
  • If a clear icon metaphor cannot be defined, the action should be placed under Options list instead.
    • Therefore the action button 1 location can also be empty.
  • You cannot have action button 1 populated when using the Java list component.
Action button 2 (left most location of the Header bar) is always populated with the Options list icon (either in active or dimmed mode).
  • If there are one or more secondary actions, they are placed in the Options list; options list icon is the default icon for action button 2. Options list icon is shown.
  • If you do not have a clear icon metaphor for the primary action of the view, define it as 'screen command' instead of 'icon command' to appear in the Options list. Options list icon is shown.
  • If the view doesn't have any actions, or just one primary action ('icon command') that is displayed in action button 1, the Options list icon is displayed but is dimmed.

Header bar icons

The Header bar icon canvas is 20 x 20 px. The bounding box is 32 x 28 px. Please refer to the Nokia icon toolkit for some ready-made Header bar icons.

© Nokia 2012.